<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <link rel="stylesheet" href="css/rechargeProduct.css">
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="../css/product.css">
    <title>商品分享</title>
</head>

<body>
    <div id="app" v-cloak>
        <div class="mask" v-if="mask">
            <img src="../img/load.gif">
        </div>
        <!-- 轮播图 开始 -->
        <van-swipe class="my-swipe" autoplay="true" indicator-color="white">
            <van-swipe-item v-for="item in productLoopList">
                <img :src="path+'product/product_'+product_id+'/'+ item.proLoopPic" class="banner-image">
            </van-swipe-item>
        </van-swipe>
        <!-- 轮播图 结束 -->

        <!-- 商品信息 开始 -->
        <div class="productInfo">
            <div class="productPrice"><span>￥{{product.inventory}}</span> </div>
            <div class="productName">{{product.productName}}</div>
            <div class="productJJ">{{product.productTitle}}</div>
            <!-- <div class="shareBtn" @click="toShare">分享</div> -->
            <div class="vipBuyTip" style="width: 280px;margin-bottom: 10px;">
                会员使用储值金购买可享受{{rebateNum}}折优惠
            </div>
            <div class="shopInfo" v-if="shopInfo!=''">
                <div>门店：{{shopInfo.shopName}}</div>
                <div>地址：{{shopInfo.shopAddres==null?'暂无地址信息':shopInfo.shopAddres}}</div>
                <div>联系电话：{{shopInfo.shopTel==null?'暂无联系电话':shopInfo.shopTel}}</div>
            </div>
        </div>

        <div class="formart" @click="showAlert(1)">
            <span>规格</span> <span>{{formart.formartName}}</span>
            <van-icon class="foricon" name="weapp-nav" />
        </div>
        <div class="canshu" @click="showAlert(2)">
            <span>参数</span> <span>产品类型、产品参数</span>
            <van-icon class="foricon" name="weapp-nav" />
        </div>
        <!-- 商品信息 结束 -->

        <!-- 评价 开始 -->
        <div class="commentA">
            <div class="commentTitle">
                <span>评价（{{commentNum}}）</span>
            </div>
            <div class="commentMain">
                <div class="commentItem" v-for="item in userCommentList">
                    <div class="itemTitle">
                        <img class="userImg" :src='item.cityName' @error="loadimg">
                        <div class="userInfo">
                            <div>{{item.userName}}</div>
                            <div class="startImg">
                                <img src="../img/comment-icon1.png" alt="">
                                <img src="../img/comment-icon1.png" alt="">
                                <img src="../img/comment-icon1.png" alt="">
                                <img src="../img/comment-icon1.png" alt="">
                                <img src="../img/comment-icon1.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="commentCon" v-if="item.context == ''">
                        暂未做出评论
                    </div>
                    <div class="commentCon" v-else>
                        {{item.context}}
                    </div>
                </div>
            </div>
        </div>
        <!-- 评价 结束 -->

        <!-- 商品问答 开始 -->
        <div class="commentA">
            <div class="commentTitle">
                <span>商品问答（{{answerNum}}）</span>
            </div>
            <div class="commentMain">
                <div class="commentItem" v-for="item in answers">
                    <div class="commentCon1">
                        <div class="answerIcon">问</div> {{item.answerContent}}
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品问答 结束 -->

        <!-- 详情图 开始 -->
        <div class="detailImg" ref="detail">
            <img :src="path+'product/product_'+product_id+'/'+item.picAddr" v-for="item in proPicList">
        </div>
        <!-- 详情图 结束 -->

        <!-- 购买按钮 开始 -->
        <div class="downBtnBox">
            <div class="submitBtn" @click="downHandle">
                下载APP购买
            </div>
            <div class="submitBtn" @click="productAlertShow=true">
                立即购买
            </div>
        </div>



        <div class="downBox" v-if="showPop" @click="showPop=false">
            <img src="../img/downTip.png" alt="">
        </div>
        <div class="downBox" v-if="sharePop" @click="sharePop=false">
            <img class="shareImg" src="../img/shareImg.png" alt="">
        </div>

        <!-- 规格弹窗 开始 -->
        <van-action-sheet v-model="productAlertShow" title="规格">
            <div class="product-outter-content">
                <div class="product-alert-content">
                    <div class="product-image-box">
                        <img :src="path+'product/product_'+product_id+'/'+formart.formartImg">
                        <div>
                            <div class="goods-price">
                                <div>
                                    ￥<span>{{formart.formartPrice}}</span>
                                </div>
                            </div>
                            <div class="goods-num">库存{{formart.inventory}}</div>
                        </div>
                    </div>
                    <div class="product-alert-title">规格</div>
                    <div class="prodcut-spec-box">
                        <div v-for="(item,index) in formarts"
                            :class="item.formartId==formart.formartId?'product-spec-item active':'product-spec-item'"
                            @click="changeFormart(item)">{{item.formartName}}</div>
                    </div>
                    <div class="product-alert-title space-between padding-top-4">
                        <div>数量</div>
                        <div class="num-box">
                            <button class="num-box-sub" @click="subProductNum" :disabled="chooseNum == 1">-</button>
                            <div class="num-box-num">{{chooseNum}}</div>
                            <button class="num-box-add" @click="addProductNum">+</button>
                        </div>
                    </div>
                    <div class="true-btn-box btnBox">
                        <button @click="closeAlert(1)" type="button" class="true-btn">立即支付</button>
                    </div>
                </div>
            </div>
        </van-action-sheet>

        <!-- 规格弹窗 结束 -->

        <!-- 参数弹窗 开始 -->
        <van-action-sheet v-model="parameterAlertShow" title="参数">
            <div class="product-outter-content">
                <div class="product-alert-content">
                    <div class="para-item" v-for="item in paras">
                        <div class="para-name">{{item.parameterName}}</div>
                        <div class="para-text">{{item.parameterContent}}</div>
                    </div>
                </div>
                <div class="true-btn-box btnBox" @click="closeAlert(2)">
                    <button type="button" class="true-btn">关闭</button>
                </div>
            </div>
        </van-action-sheet>
        <!-- 参数弹窗 结束 -->
    </div>
    <script src="../js/vue.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>

        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;

        var vm = new Vue({
            el: '#app',
            data: {
                product_id: sessionStorage.getItem('productId'),
                user_id: sessionStorage.getItem('userId'),
                shop_id: sessionStorage.getItem('shopId'),
                // product_id: 2135,
                // user_id: 97740,
                // shop_id: 3522,
                productAlertShow: false,
                parameterAlertShow: false,
                sWidth: 0,
                formarts: {},
                paras: {},
                proPicList: {},
                product: '',
                productLoopList: {},
                formart: '',
                chooseNum: 1,
                answers: [],
                answerNum: '',
                userCommentList: [],
                commentNum: '',
                showPop: false,
                sharePop: false,
                totalMoney: 0,// 总金额
                mask: true,
                userInfo: {
                    userName: '',
                    telNumber: '',
                    address: '',
                },
                shopInfo: sessionStorage.getItem('shop') == null ? '' : JSON.parse(sessionStorage.getItem('shop')),
                rebateNum: 5
            },
            created() {
                // this.shopInfo = {
                //     shopName: '测试门店2',
                //     shopAddres: '山东省德州市德城区新华街道办事处新园社区新宜家园90.91号',
                //     shopTel: '15904440357',
                // }
                if (!this.product_id) {
                    window.location.replace("../newDown.html")
                }
                console.log(path);
                this.getData()
                this.getData1()
                this.getSpecialID()
            },

            mounted() {
                // 动态设置swipeItem的width
                this.sWidth = document.body.clientWidth / 3.763636363636364
            },
            methods: {

                setTitle(name) {
                    document.title = name
                    const i = document.createElement('iframe')
                    i.src = '/favicon.ico'
                    i.style.display = 'none'
                    i.onload = function () {
                        setTimeout(function () {
                            i.remove()
                        }, 9)
                    }
                    document.body.appendChild(i)

                },


                // 立即支付
                payHandle() {
                    this.totalMoney = Number(this.chooseNum) * Number(this.formart.formartPrice)
                    this.totalMoney = Number((this.totalMoney).toFixed(2))
                    console.log(this.formart);
                    console.log(this.chooseNum);
                    console.log(this.totalMoney);
                    console.log(this.product);
                    this.product.productPrice = this.product.inventory

                    var proObj = {
                        formart: this.formart,
                        chooseNum: this.chooseNum,
                        totalMoney: this.totalMoney,
                        product: this.product,
                    }

                    sessionStorage.order = JSON.stringify(proObj)
                    window.location.replace("submitorder.html")
                },

                loadimg(e) {
                    var img = e.srcElement;
                    img.src = 'img/about.png'
                },
                getData: function () {
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "product/getProduct",
                        data: {
                            product_id: that.product_id,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res)
                            if (res.flag) {
                                that.mask = false
                                var data = res.data
                                that.formarts = data.formatList;
                                that.formart = data.formatList[0];
                                that.paras = data.parameterList;
                                that.proPicList = data.proPicList.filter(item => {
                                    return item.picStatus == 1
                                });
                                that.product = data.product;
                                that.productLoopList = data.productLoopList.filter(item => {
                                    return item.proLoopStatus == 1
                                });
                                that.setTitle(that.product.productName)
                            }
                            console.log(that.formart)
                        },
                    })
                },
                getData1: function () {
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "product/vipDetail",
                        data: {
                            productId: that.product_id,
                            shopId: that.shop_id,
                            userId: that.user_id
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res)
                            if (res.flag) {
                                that.mask = false
                                var data = res.data
                                that.answers = data.answers;
                                that.answerNum = data.answerNum;
                                that.userCommentList = data.userCommentList;
                                that.commentNum = data.commentNum;
                            }
                        },
                    })
                },
                getSpecialID() {
                    var _this = this;
                    ajax({
                        url: newUrl + 'product/listCashProduct',
                        type: 'post',
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            if (res.flag) {
                                res.data.forEach(item => {
                                    if (item.advance == 5 && item.productId == sessionStorage.shopId) {
                                        _this.rebateNum = Number(item.advances)
                                    }
                                })
                                console.log(_this.rebateNum);
                            }
                        }
                    })
                },
                showAlert: function (flag) {
                    if (flag == 1) {
                        // 规格弹窗
                        this.productAlertShow = true
                    } else {
                        // 参数弹窗
                        this.parameterAlertShow = true
                    }
                },
                subProductNum: function () { //商品数量减
                    this.chooseNum--;
                },
                addProductNum: function () { //商品数量加
                    this.chooseNum++;
                },
                // 关闭弹窗   
                closeAlert: function (flag) {
                    if (flag == 1) {  //点击购买
                        this.productAlertShow = false
                        console.log(this.formart);
                        console.log(this.chooseNum);
                        this.payHandle()

                    } else {
                        this.parameterAlertShow = false
                    }
                },
                changeFormart: function (formart) {
                    this.formart = formart;
                },
                downHandle: function () {
                    window.location.replace("../newDown.html")
                },
                toShare: function () {
                    var _this = this;
                    _this.mask = true
                    var title = _this.product.productName;
                    var dec = "这里有好商品，分享给你咯";
                    var url = location.href.split('#')[0];
                    ajax({
                        type: "post",
                        url: newUrl + "share/share",
                        data: {
                            url: url
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var res = JSON.parse(data)
                            console.log(res)
                            var datas = res.data
                            _this.mask = false;
                            wx.config({
                                debug: false,
                                appId: datas.appId,
                                timestamp: datas.timestamp,
                                nonceStr: datas.nonceStr,
                                signature: datas.sign,
                                jsApiList: [
                                    'checkJsApi',
                                    'updateAppMessageShareData',
                                    'updateTimelineShareData',
                                    'onMenuShareTimeline',
                                    'onMenuShareAppMessage'
                                ]
                            });
                            wx.ready(function () { //需在用户可能点击分享按钮前就先调用
                                _this.sharePop = true;
                                var img = path + "product/product_" + _this.product_id + '/' + _this.product.productPic;
                                var link_rrl =
                                    "https://www.ccclkj.cn/sharepage/index.html?user_id=" +
                                    _this.user_id + "&id=" + _this.product_id + "&flag=0&shopId=" + sessionStorage.shopId
                                wx.updateAppMessageShareData({
                                    title: title, // 分享标题
                                    desc: dec, // 分享描述
                                    link: link_rrl, // 分享链接
                                    imgUrl: img, // 分享图标
                                    type: 'link', // 分享类型,music、video或link，不填默认为link
                                    success: function (res) {
                                        // console.log(1);
                                        //$("body").remove(".thisMask");
                                        return false;
                                    }
                                })
                                wx.updateTimelineShareData({
                                    title: title, // 分享标题
                                    link: link_rrl, // 分享链接
                                    imgUrl: img, // 分享图标
                                    success: function () {
                                        //$("body").remove(".thisMask");
                                        return false;
                                    }
                                })
                            });
                            wx.error(function (res) {
                                // alert(JSON.stringify(res))
                            })
                        }
                    })
                },
            }
        })
        // try {
        //     window.tbs_bridge.nativeExec('network', 'type', 0, null);
        // } catch (e) {
        //     console.error(e);
        // }
        // window.onpageshow = function (event) {
        //     if (
        //         event.persisted ||
        //         (window.performance && window.performance.navigation.type == 2)
        //     ) {
        //         alert("我监听到了浏览器的返回按钮事件啦")
        //         WeixinJSBridge.call('closeWindow');

        //     }
        // }
        // 添加退后事件
        // window.addEventListener('popstate', () => {
        //     alert("我监听到了浏览器的返回按钮事件啦")
        //     WeixinJSBridge.call('closeWindow');
        // });

    </script>

</body>

</html>